<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>API组</title>
    <link href="js/layer/css/layui.css" rel="stylesheet">
    <style>
        #view{
            background: #fff;
            overflow: hidden;
            padding: 2%;
            height: auto; width: 94%; margin-left: auto; margin-right: auto; margin-top: 1%;
        }

        #view .apidoc-title .uri-title{
            font-size: 16px;
            float: left;cursor:pointer;margin-top: 15px;
        }

        #view .apidoc-title .versions{
            margin-top: 15px;
            height: 30px;
            text-align: center;
            width: 100px;float: right;
            background: #fff;
            border: 1px solid #eee;
        }

        #view .apidoc-description{
            margin-top: 15px;
            margin-bottom: 15px;
            width: 100%;
            float: left;
            color: #3B514D;
            position: relative;
        }

        #view .apidoc-description .description{
            width: 80%;
            float: left;
        }

        #view .apidoc-description .debug{
            /*float: right;*/
            position: absolute;
            right: 0px;
        }

        #view .request-param-title{
            margin-top: 15px;
            margin-bottom: 15px;
        }

        #view .layui-table-view{
            margin-bottom: 50px;
        }

        #view .underline{
            height: 1px;
            width: 100%;
            opacity: 0.5;
            margin-top: 15px;
            margin-bottom: 15px;
            background-color: rgba(77,82,89,0.05);
        }

        #view .request-method{
            float: left;
            width: 100%;
        }

        #view iframe{
            background: #fff;border: none!important; width: 100%; padding: 0px; margin: 0px; height: 200px;overflow:scroll;overflow-y:hidden;
        }

        #view .request-example{
            position: relative!important;
        }

        #view .onlineCodeDebug{
            z-index:999;position: absolute; right:0px;display: block; width: 120px;
            border: none;
        }

        #view .request-example .layui-unselect{
            opacity: 0;
            display: none!important;
        }

        #view .request-example .layui-tab-content{
            padding: 0 0;
        }

        #view .sample-code{
            position: relative;
        }

        #view .example-success{
            font-size: 14px;
            /*background-color: #F8F9FA;*/
            /*border: none;*/
            /*padding: 15px;*/
            /*border-radius: 3px;*/
            /*font-size: inherit;*/
            /*color: #2f6f9f;*/
        }

        #view .example-failure{
            font-size: 14px;
        }

        .btn-method-get{
            background-color: #48b0f7;
            border-color: #48b0f7;
            color: #fff !important;
        }

        .btn-method-put{
            background-color: #faa64b;
            border-color: #faa64b;
            color: #fff !important;
        }
        .btn-method-delete{
            background-color: #f96868;
            border-color: #f96868;
            color: #fff !important;
        }
        ul.json-dict, ol.json-array {
            list-style-type: none;
            margin: 0 0 0 1px;
            border-left: 1px dotted #ccc;
            padding-left: 2em;
        }
        .json-string {
            color: #3ab54a;
            font-weight: bold;
        }
        .json-literal {
            color: #25aae2;
            font-weight: bold;
        }

        /* Toggle button */
        a.json-toggle {
            position: relative;
            color: inherit;
            text-decoration: none;
        }
        a.json-toggle:focus {
            outline: none;
        }
        a.json-toggle:before {
            color: #aaa;
            content: "\25BC"; /* down arrow */
            position: absolute;
            display: inline-block;
            width: 1em;
            left: -1em;
        }
        a.json-toggle.collapsed:before {
            transform: rotate(-90deg); /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */
            -ms-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
        }

        /* Collapsable placeholder links */
        a.json-placeholder {
            color: #aaa;
            padding: 0 1em;
            text-decoration: none;
        }
        a.json-placeholder:hover {
            text-decoration: underline;
        }
        a{
            color: #4d5259;
        }
        li{
            list-style: none!important;
            list-style-type:none!important;
            margin: 0px!important;
        }
    </style>
</head>
<body>

<div id="view">
    <!---api地址 标题 多版本切换-->
    <div class="apidoc-title">
        <h4 class="uri-title"><span id="api-uri">{{d[0]['uri']}}</span> &nbsp;&nbsp;(<span id="api-title">{{d[0]['title']}}</span>)</h4>
        <select id="example-version" class="layui-form versions" name="example-select" size="1">
            {{#  arr_foreach(d[0].versions, function(k1, v1){ }}
            {{#  if(v1 == d[0].version){ }}
            <option selected value="{{v1}}">{{v1}}</option>
            {{# }else{ }}
            <option value="{{v1}}">{{v1}}</option>
            {{#  } }}
            {{#  }); }}
        </select>
    </div>

    <div class="apidoc-description">
        <div class="description" id="description">{{d[0]['description']}}</div>
        <div class="debug">
            <button onclick="onlineDebug()" style="float: right;display: block;width: 100px;" class="layui-btn" type="button">在线调试</button>
        </div>
    </div>

    <!---api请求方式tab-->
    <div class="layui-tab layui-tab-brief request-method">
        <ul class="layui-tab-title" id="requestMethod">
            {{#  arr_foreach(d, function(k1, v1){ }}
            {{#  if(k1 == 0){ }}
            <li class="layui-this" id="requestMethod-{{v1.method}}" onclick="switchMethod({{k1}})">{{v1.method}}</li>
            {{# }else{ }}
            <li id="requestMethod-{{v1.method}}" onclick="switchMethod({{k1}})">{{v1.method}}</li>
            {{#  } }}
            {{#  }); }}
        </ul>
        <div class="layui-tab-content"  id="requestContent">
            {{#  arr_foreach(d, function(k1, v1){ }}
            <div class="layui-tab-item">
                <h3 class="request-param-title">请求头参数</h3>
                <!---api请求头参数表格-->
                <table class="layui-hide" data-type="tree-table" id="{{v1.method}}-request-head" data-field='[{"field":"name","title":"字段","width":170},{"field":"type","title":"类型","width":170},{"field":"required","title":"必填","width":170},{"field":"default","title":"默认值","width":170},{"field":"description","title":"描述"}]' data-item='{{json_encode(v1.header)}}' data-nodata="无请求参数"></table>

                <h3 class="request-param-title">请求参数</h3>
                <!---api请求参数表格-->
                <table class="layui-hide" data-type="tree-table" id="{{v1.method}}-request-param" data-field='[{"field":"name","title":"字段","width":170},{"field":"type","title":"类型","width":170},{"field":"required","title":"必填","width":170},{"field":"default","title":"默认值","width":250},{"field":"description","title":"描述"}]' data-item='{{json_encode(v1.param)}}' data-nodata="无请求参数"></table>

                <div>
                    {{v1.detail}}
                </div>

                <iframe id="sample-iframe" src="sample.html" style="min-height: 550px; display: none;"></iframe>

                <h3 class="request-param-title">响应参数</h3>
                <table class="layui-hide" data-type="tree-table" id="{{v1.method}}-response-param"  data-field='[{"field":"name","title":"字段","width":170},{"field":"type","title":"类型","width":170},{"field":"default","title":"示例值","width":220},{"field":"description","title":"描述"}]' data-item='{{json_encode(v1.success)}}' data-nodata="无响应参数"></table>


                <h3 class="request-param-title">错误说明</h3>
                <table class="layui-hide" data-type="tree-table" id="{{v1.method}}-error"  data-field='[{"field":"code","title":"错误代码","width":170},{"field":"description","title":"描述"}]' data-item='{{json_encode(v1.error)}}' data-nodata="无错误说明"></table>

                <div style="display: none">
                    <!---api响应示例json-->
                    <h3 class="request-param-title" style="margin-top: 55px;">响应示例</h3>
                    <div>
                        <pre class="layui-code example-success">{{json_encode(v1.response)}}</pre>
                    </div>
                </div>

            </div>
            {{#  }); }}
        </div>

    </div>

</div>










<!---api响应示例json格式化-->

<!---api异常示例json格式化-->

<!---api错误码解释表格-->
<div class="flow-demo" id="ID-flow-demo-manual"></div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script type="text/javascript" src="js/layer/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.json-viewer.js"></script>
<!--<script type="text/javascript" src="/admin/js/apidoc.js"></script>-->
<script>
    window.viewData = null;
    window.selectVersion = null;
    window.indexMethod = 0;
    ready(function() {
        layui.use(['zhanshop', 'table'], function(){
            // 无法重新渲染了 因为它已经被替换了一回
            layui.zhanshop.view(API_ADDRESS + apiUrl, '#view', function(res){
                viewData = res;
                $("#sample-code").attr('src', '/admin/example/vue3.html');
                $("#requestContent").find('.layui-tab-item').eq(0).addClass('layui-show');

                $(".layui-hide").each(function (index) {
                    var item = $(this).data('item');
                    var type = $(this).data('type');
                    var field = $(this).data('field');
                    if(type == 'tree-table'){
                        layui.treeTable.render({
                            elem: '#'+this.id,
                            data: item,
                            text: {none: $(this).data('nodata')},
                            tree: {
                                view: {
                                    icon: ' ',
                                    expandAllDefault: true
                                },
                            },
                            cols: [field],
                        });
                    }else{
                        var inst = table.render({
                            elem: '#'+this.id,
                            cols: [field],
                            data: item,
                            text: {none: $(this).data('nodata')}
                            //skin: 'line', // 表格风格
                            //even: true
                        });
                    }
                });
                $('.example-success').each(function () {
                    var json = $(this).html();
                    if(json != "" && json != "[]"){
                        $(this).parent().parent().css('display', '');
                        var options = {
                            withQuotes: true,
                            withLinks: true
                        };
                        $(this).jsonViewer(JSON.parse(json), options);
                    }
                });

                $("#example-version").change(function () {
                    var urlSuffix = 'method='+$("#requestMethod").find('.layui-this').html()+'&';
                    urlSuffix += 'version='+$(this).val();
                    var baseUrls = parent.window.location.href.split("/#/");
                    var paths = baseUrls[1].split("?");
                    var url = baseUrls[0]+'/#/'+paths[0]+'?'+urlSuffix;
                    parent.window.history.pushState({}, this.outerText, url);
                    layer.open({
                        type: 2,
                        title: "历史版本", // 不显示标题栏
                        area: ['100%', '100%'],
                        content: './historyapi.html?uri='+$(this).val()+'/'+layui.zhanshop.getParam('_id')+'&method='+$("#requestMethod").find('.layui-this').html()
                    });
                    $(this).val(viewData[indexMethod]['version']);
                });

            }, 'POST', {"_method":"apis",  "uri" : layui.zhanshop.getParam('_id')}, {"auth": layui.zhanshop.getcookie('_auth')});



            var table = layui.table;

            window.onlineDebug = function (){
                // 屏幕的一半
                open('debug.html?uri='+$('#api-uri').html()+'&method='+$('#requestMethod .layui-this').html(), '接口调试', 'top=120,left=120,width='+($(window).width() * 0.9)+'px,height='+$(window).height()+'px');
            }

            window.onlineCodeDebug = function () {
                layer.open({
                    skin: 'layer-zhanshop',
                    type: 2, // page 层类型
                    area: ['100%', '100%'],
                    title: '运行代码',
                    shade: 0.3, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '/admin/example/idea.html'
                });
            }

            window.switchMethod = function (key){
                //<h4 className="uri-title"><span id="api-uri">{{d[0]['uri']}}</span> &nbsp;&nbsp;(<span id="api-title">{{d[0]['title']}}</span>)</h4>
                $("#api-uri").html(viewData[key]['uri']);
                $("#api-title").html(viewData[key]['title']);
                $('#description').html(viewData[key]['description']);
                var versions = viewData[key]['versions'];
                var versionsHtml = '';
                for(var i in versions){
                    var select = '';
                    if(versions[i] == viewData[key]['version']) select = ' selected ';
                    versionsHtml += '<option value="'+versions[i]+'"'+select+'>'+versions[i]+'</option>';
                }
                $('#example-version').html(versionsHtml);

                var baseUrls = parent.window.location.href.split("/#/");
                var paths = baseUrls[1].split("?");
                var url = baseUrls[0]+'/#/'+paths[0]+'?method='+$("#requestMethod").find('li').eq(key).html();
                if(selectVersion){
                    url += '&version='+selectVersion;
                }
                parent.window.history.pushState({}, this.outerText, url);
                indexMethod = key;
            }

            // 带入访问入口参数
            var urlSuffix = '';
            var urlVersion = layui.zhanshop.getParam('version');
            if(urlVersion && typeof urlVersion !== 'string'){
                urlVersion = '';
            }
            var urlMethod = layui.zhanshop.getParam('method');
            if(urlMethod && typeof urlMethod !== 'string'){
                urlMethod = '';
            }

            if(urlMethod){
                urlSuffix += 'method='+urlMethod+'&';
            }
            if(urlVersion){
                urlSuffix += 'version='+urlVersion+'&';
            }

            urlSuffix = urlSuffix.substring(0, urlSuffix.length-1)
            if(urlSuffix){
                var baseUrls = parent.window.location.href.split("/#/");
                var paths = baseUrls[1].split("?");
                var url = baseUrls[0]+'/#/'+paths[0]+'?'+urlSuffix;
                parent.window.history.pushState({}, this.outerText, url);
            }
        });


    });
</script>
</body>
</html>